import React from 'react'
import { Outlet } from 'react-router-dom'
import { Badge, TabBar } from 'antd-mobile';
import { AppOutline, MessageOutline, MessageFill, UnorderedListOutline, UserOutline,FaceRecognitionOutline } from 'antd-mobile-icons';
import { useNavigate,useLocation } from 'react-router-dom';
export default function App() {
  const navigate = useNavigate();
  const location = useLocation();
   const tabs = [
        {
            key: '/sendList',
            title: '广场',
            icon: <AppOutline />,
            badge: Badge.dot,
        },
         {
            key: '/rooms',
            title: '房间',
            icon: <FaceRecognitionOutline />,
            badge: Badge.dot,
        },
        {
            key: '/add',
            title: '发布',
            icon: <UnorderedListOutline />,
            badge: '5',
        },
        {
            key: '/liaotian',
            title: '消息',
            icon: (active: boolean) => active ? <MessageFill /> : <MessageOutline />,
            badge: '99+',
        },
        {
            key: '/my',
            title: '我的',
            icon: <UserOutline />,
        },
    ];
  return (
    <div> 
        <Outlet/>
        <div style={{position:'fixed',width:'100%',bottom:'0px',backgroundColor:'#fff'}}>
          <TabBar activeKey={location.pathname}>
            {tabs.map(item => (<TabBar.Item key={item.key} icon={item.icon} title={item.title} onClick={()=>{
              navigate(item.key)
            }}/>))}
          </TabBar>
        </div>
    </div>
  )
}
